<template>
	<view class="content" :style="`min-height: ${windowHeight}px`">
		<view class="avtivity-list">
			<view class="avtivity-item" v-for="(item, index) in activitylist" :key="index" @click="handleItemClick(item)">
				<!-- <up-image :src="item.activityBanner || item.thumbnail || cover" width="100%" height="320rpx" radius="10" mode="widthFix"></up-image> -->
				<image :src="item.activityBanner || item.thumbnail || cover" class="fixed-height-image" mode="widthFix"></image>
				<view class="title">{{item.activityTitle}}</view>
				<view class="time" v-if="options.type !== '2'">
					<!-- <up-icon name="clock" color="#999"></up-icon> -->
					<view>{{item.activityStartTime}}~{{item.activityEndTime}}</view>
				</view>

				<view class="tag-view" v-if="options.type == '3'">
					<up-tag
					v-if="item.activityStatus == 2"
					text="已结束" 
					bgColor="#999" 
					color="#fff" 
					borderColor="transparent"></up-tag>
					<up-tag
					v-else-if="item.activityStatus == 0"
					text="未开始" 
					bgColor="#999" 
					color="#fff" 
					borderColor="transparent"></up-tag>
					<view v-else>
						<up-tag
						v-if="item.alreadyAnswer"
						text="已参加" 
						bgColor="#0E9ADF" 
						color="#fff" 
						borderColor="transparent"></up-tag>
						<up-tag 
						v-else
						:text="item.joinFlag?'已报名':'未报名'" 
						:bgColor="item.joinFlag?'#0E9ADF':'#d81e06'" 
						color="#fff" 
						borderColor="transparent"></up-tag>
					</view>
				</view>
		
				<view v-if="options.type == '1'">
					<up-tag
					v-if="item.activityStatus == 2"
					text="已结束" 
					bgColor="#999" 
					color="#fff" 
					borderColor="transparent"></up-tag>
					<up-tag
					v-else-if="item.activityStatus == 0"
					text="未开始" 
					bgColor="#999" 
					color="#fff" 
					borderColor="transparent"></up-tag>
					<up-tag 
					v-else
					:text="item.joinFlag?'已报名':'未报名'" 
					:bgColor="item.joinFlag?'#0E9ADF':'#d81e06'" 
					color="#fff" 
					borderColor="transparent"></up-tag>
				</view>
			</view>
		<!-- 	<up-loadmore :status="status" /> -->
		</view>
		<!-- <button @tap="removeCache()">清除缓存</button> -->
	</view>
</template>

<script>
	import TopBar from '@/components/system/TopBar.vue'
	import { activityApi } from '@/api/activity/activity-app.js';
	import { countTotalPage } from '@/utils/util'
	import { showConfirm  } from '@/utils/common';
	
	export default {
		data() {
			return {
				keywords: '',
				state: '',
				dept: '',
				activitylist: [
				],
				cover: 'https://axhub.im/ax9/4fb01a9c2a1b02c8/images/%E5%81%A5%E6%AD%A5%E8%B5%B0/u7.svg',
				pageRequest:{
					page:1,
					limit:10,
				},
				hasMore:true,
				totalPage: 0,
				status: 'loadmore',
				options: {},
				windowHeight: 0
			}
		},

		onLoad(options) { // activityStatus 0 未开始  1 活动中  2  已结束
			this.options = options
			// #ifdef H5
			this.parseUrlParams();
			var titleElement = document.querySelector('.uni-page-head-ft'); // 假设标题的类名是 .uni-page-head-ft
			if (titleElement) {
			    titleElement.textContent = '健步走'; // 设置标题内容
			}
			this.options.type = '1';
			// #endif
			this.getDataList();
			// #ifdef MP-WEIXIN
			uni.setNavigationBarTitle({
				title: options.title
			})
			// #endif
			
			this.getsize()
		},
		onShow() {
			this.getDataList()
		},
		onReachBottom() {
			if (this.pageRequest.page < this.totalPage) {
				this.pageRequest.page ++
				this.status = 'loading';
				this.getDataList()
			} else {
				this.status = 'noMore';
			}
		},
		mounted(){
			// #ifdef H5
			//去掉返回按钮
			var backbutton = document.getElementsByClassName('uni-page-head-hd')[0]
			if(backbutton) backbutton.style.display = 'none';
			
			// 动态设置标题内容
			var titleElement = document.querySelector('.uni-page-head-ft'); // 假设标题的类名是 .uni-page-head-ft
			if (titleElement) {
			    titleElement.textContent = '健步走'; // 设置标题内容
			}
			// #endif
		},
		methods: {
			getsize(){
			  let that = this
			  uni.getSystemInfo({
				success(res) {
				  that.windowHeight = res.windowHeight
				},
			  })
			},
			async getDataList(){
				const result = this.options.type=='1'?await activityApi.queryList(this.pageRequest):
				this.options.type=='2'?await activityApi.getSnapshotList(this.pageRequest):await activityApi.getCompetitionList(this.pageRequest);
				if(result.data.list.length > 0){
					if (this.pageRequest.page === 1) {
						this.activitylist = result.data.list
						this.status = 'noMore';
					} else {
						this.activitylist = this.activitylist.concat(result.data.list);
					}
					this.totalPage = countTotalPage(result.data.total)

				}else {
					uni.showToast({
					  title: '没有更多数据了',
					  icon: 'none',
					});
				}
			},
			handleItemClick(item) {
				
				// #ifdef H5
				this.options.type = '1';
				// #endif
				let union_token = uni.getStorageSync('union_token')
				
				// if (!union_token) {
				// 	showConfirm('您还未登录，是否前往登录页面?').then(res => {
				// 		if (res.confirm) {
				// 			uni.reLaunch({ url: '/pages/user/mobile-login?type=walking' })
				// 		}
				// 	})
				// 	return false
				// }
				if (this.options.type == '1') { // 健步走
					if (item.activityStatus == 2) { // 已结束
						uni.navigateTo({
							url: `/brisk-walking/detail?title=${item.activityTitle}&id=${item.id}&activityStatus=${item.activityStatus}`
						})
						return false
					}
					if (!item.joinFlag) { // 未报名
						uni.navigateTo({
							url: `/brisk-walking/transfer?title=${item.activityTitle}&id=${item.id}&activityBgImage=${item.activityBgImage}&joinOrgId=${item.joinOrgId}&activityStatus=${item.activityStatus}`
						})
					} else { // 已报名
						uni.navigateTo({
							url: `/brisk-walking/detail?title=${item.activityTitle}&id=${item.id}`
						})
					}
					
				} else if (this.options.type == '2') { // 单独的随手拍
					uni.navigateTo({
						url: `/brisk-walking/instashot/list?id=${item.id}&type=2&activityStatus=${item.activityStatus}`
					})
				} else { // 单独的知识竞赛
					this.handleKnowClick(item)
				}

			},
			handleKnowClick(item) {
				if (item.activityStatus == 2) {
					uni.showToast({
					  title: '活动结束啦~',
					  icon: 'none',
					});
					return false
				}
				if (!item.alreadyAnswer) {
					if (item.joinFlag) {
						uni.navigateTo({
							url: '../brisk-walking/knowledgeContest?id=' + item.id + '&type=3'
						});
					} else {
						uni.navigateTo({
							url: `/answer-questions/question-transfer?id=${item.id}&type=3`
						})
					}
				} else {
					uni.showToast({
					  title: '您已经答完题啦~',
					  icon: 'none',
					});
				}

				
			},
			parseUrlParams() {
				let currentUrl = window.location.href;
				if(currentUrl){
					// 获取问号后面的查询字符串
					const queryString = currentUrl.split('?')[1];
					// 解析查询字符串
					const params = {};
					queryString.split('&').forEach(pair => {
					  const [key, value] = pair.split('=');
					  params[decodeURIComponent(key)] = decodeURIComponent(value);
					});
					const app = getApp();
					app.globalData.currentUser = params;
				}
			},
			removeCache(){
				try {
				  uni.removeStorageSync('union_token');
				  uni.removeStorageSync('login_data');
				  uni.clearStorageSync();
				  console.log('指定缓存已成功删除');
				} catch (err) {
				  console.error('删除指定缓存失败：', err);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.content {
	background-color: #F5F6FA;
}
.avtivity-list {
	padding: 30rpx;
	.avtivity-item {
		margin-bottom: 30rpx;
		background-color: #fff;
		padding: 30rpx;
		border-radius: 20rpx;
		.fixed-height-image {
			width: 100%;
			height: 220rpx; /* 固定高度 */
			object-fit: cover; /* 保持宽高比，裁剪多余部分 */
			border-radius: 20rpx; /* 圆角 */
			// border:  1px solid red;
		}
		.title {
			font-weight: 700;
			font-size: 32rpx;
			margin: 10rpx 0;
		}
		.time {
			font-size: 28rpx;
			color: #828282;
			display: flex;
			margin-bottom: 20rpx;
			.label {
				margin-right: 30rpx;
			}
		}
	}
}
</style>
